<template>
  <div class="title-card">
    <vertical-center-row class="title">
      <div class="circle"></div>
      <div>{{ title }}</div>
    </vertical-center-row>
    <div
      class="title-card-content"
      :style="{'grid-template-columns': 'repeat('+ (colNum || 2) + ', 1fr)'}"
    >
      <slot />
    </div>
  </div>
</template>

<script>
import VerticalCenterRow from "@/components/base/VerticalCenterRow";
export default {
  name: "TitleCard",
  components: {
    VerticalCenterRow
  },
  props: ["title", "colNum"]
};
</script>

<style lang="scss" scoped>
.title-card {
  color: #4d576c;
  .title {
    margin: 10px 0;
  }
  .circle {
    width: 8px;
    height: 8px;
    background: linear-gradient(
      0deg,
      rgba(54, 192, 255, 1),
      rgba(83, 245, 255, 1),
      rgba(95, 255, 250, 1)
    );
    border-radius: 50%;
    margin-right: 10px;
  }
  .title-card-content {
    display: grid;
    // grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 12px;
  }
}
</style>
